<template>
	<div class="myinfo-totle">
		<!-- 头部 -->
		<div class="myinfo-title">
			<img class="myinfo-shezhi" src="../assets/shezhi.png" @click="out"/>
			<span>我的</span>
			<img class="myinfo-xiaoxi" src="../assets/xiaoxi.png" />
		</div>
		<div>
			
		<!-- 头像栏 -->
		<div class="myinfo-touxiang">
			<img class="myinfo-photo" src="../assets/1.jpg" />
			<div class="myinfo-wenzi">
				<span class="myinfo-username">技术指导</span>
				<span class="myinfo-sign">给技术指导安排工作</span>
			</div>
			<router-link to="/PerInfo">
				<img class="myinfo-more" src="../assets/hwpush_ic_toolbar_advance.png"/>
			</router-link>
			
		</div>
		
		<!-- 云同步 签到 -->
		<div class="myinfo-firstbox">
			<div class="myinfo-cloud">
				<img src="../assets/cloud.png"/>
				<span>云同步</span>
			</div>
			<div class="myinfo-qinadao">
				<img src="../assets/qiandao.png"/>
				<span>签到</span>
			</div>
		</div>
		
		<!--会员中心 我的钱包 我的积分  -->
		<div class="myinfo-secondbox">
			<div class="myinfo-firstline">
				<img class="myinfo-huiyuan" src="../assets/huangguan.png"/>
				<span>会员中心</span>
				<img class="myinfo-morea" src="../assets/hwpush_ic_toolbar_advance.png"/>
			</div>
			<div class="myinfo-secondline">
				<img class="myinfo-qianbao" src="../assets/qianbao.png"/>
				<span>我的钱包</span>
				<img class="myinfo-morea" src="../assets/hwpush_ic_toolbar_advance.png"/>
			</div>
			<div class="myinfo-thirdline">
				<img class="myinfo-jingxuan" src="../assets/bazi.png"/>
				<span>鱼仔精选</span>
				<img class="myinfo-morea" src="../assets/hwpush_ic_toolbar_advance.png"/>
			</div>
		</div>
		
		<!-- /* 主题皮肤 心愿存钱 周期记账 */ -->
		<div class="myinfo-thirdbox">
			<div class="myinfo-fourthline">
				<img class="myinfo-pifu" src="../assets/yifu.png"/>
				<span>主题皮肤</span>
				<img class="myinfo-morea" src="../assets/hwpush_ic_toolbar_advance.png"/>
			</div>
			<div class="myinfo-fifthline">
				<img class="myinfo-cunqian" src="../assets/mofabang.png"/>
				<span>心愿存钱</span>
				<img class="myinfo-morea" src="../assets/hwpush_ic_toolbar_advance.png"/>
			</div>
			<div class="myinfo-sixthline">
				<img class="myinfo-jzhouq" src="../assets/shizhong.png"/>
				<span>周期记账</span>
				<img class="myinfo-morea" src="../assets/hwpush_ic_toolbar_advance.png"/>
			</div>
		</div>
		
		<!-- 帮助与反馈 爱的鼓励 -->
		<div class="myinfo-fourthbox">
			<div class="myinfo-seventhline">
				<img class="myinfo-fankui" src="../assets/liuyan.png"/>
				<span>帮助与反馈</span>
				<img class="myinfo-morea" src="../assets/hwpush_ic_toolbar_advance.png"/>
			</div>
			<div class="myinfo-eighthline">
				<img class="myinfo-guli" src="../assets/xin.png"/>
				<span>爱的鼓励</span>
				<img class="myinfo-morea" src="../assets/hwpush_ic_toolbar_advance.png"/>
			</div>
		</div>
		</div>
	</div>
</template>

<script>
	
	export default {
		name: 'MyInfo',
		components: {
	
		},
		data() {
			return {
				
			}
	
		},
		methods:{
			out(){
				localStorage.setItem('user_id','');
				 this.$store.commit('set', '')
				this.$router.push({ path:'/PreLogin'  })
			}
			
				
		},
		created(){
			
		
		}
	}
</script>

<style scoped>
*{
	margin: 0px;
	padding: 0px;
}
.myinfo-totle{
	background-color: #F6F6F6;
	border: 1px solid transparent;
	box-sizing: content-box;
	height: 100%;
}
/* 顶部栏 */
.myinfo-title{
	position: fixed;
	top: 0;
	width: 100%;
	height: 40px;
	background-color: #FFFFFF;
	display: flex;
	align-items: center;
	justify-content:center;
	border-bottom: 1px solid #DCDCDC;
}
.myinfo-shezhi{
	height: 26px;
	width: 26px;
	margin-left: 5px;
}
.myinfo-title>span{
	font-size: 20px;
	width: calc(100% - 66px);
}
.myinfo-xiaoxi{
	height: 30px;
	width: 30px;
	margin-right: 5px;
}

/* 头像栏 */
.myinfo-touxiang{
	margin-top: 40px;
	height: 90px;
	width: 100%;
	display: flex;
	align-items: center;
	background-color: #FFFFFF;
	border-bottom: 1px solid #DCDCDC;
}
.myinfo-photo{
	height: 50px;
	width: 50px;
	border-radius:50%;
	margin-right: 5px;
	margin-left: 5px;
}
.myinfo-wenzi{
	display: flex;
	flex-direction:column;
	/* justify-content: flex-start; */
	width: calc(100% - 98px);
}
.myinfo-username{
	font-size:16px ;
	text-align: left;
	margin-bottom: 2px;
	margin-left: 8px;
	
}
.myinfo-sign{
	font-size:14px ;
	text-align: left;
	margin-left: 8px;
	color: #8E8E8E;
}
.myinfo-more{
	width: 30px;
	height:30px;
	margin-right: 8px;
}
/* 云同步和签到 */
.myinfo-firstbox{
	height: 40px;
	width: 100%;
	background-color: #FFFFFF;
	display: flex;
	align-items: center;
	margin-bottom:10px ;
}
.myinfo-cloud{
	display: flex;
	align-items: center;
	justify-content:center;
	width: 50%;
	border-right: 1px solid #DCDCDC;
	
}
.myinfo-cloud>img{
	height: 20px;
	width: 20px;
	margin-right:3px;
}
.myinfo-cloud>span{
	font-size: 14px;
}
.myinfo-qinadao{
	display: flex;
	align-items: center;
	justify-content:center;
	width: 50%;
}
.myinfo-qinadao>img{
	height: 20px;
	width: 20px;
	margin-right:3px;
}
.myinfo-qinadao>span{
	font-size: 14px;
}

/* 会员中心 我的钱包 我的积分 */
.myinfo-secondbox{
	height: 150px;
	width: 100%;
	margin-bottom: 10px;
	background-color: #FFFFFF;
	border-bottom: 1px solid #DCDCDC;
}
.myinfo-firstline{
	height: 50px;
	width: 100%;
	border-bottom: 1px solid #DCDCDC;
	display: flex;
	align-items: center;
}
.myinfo-huiyuan{
	height:20px ;
	width: 20px;
	margin-left: 5px;
	
}
.myinfo-firstline>span{
	font-size: 16px;
	margin-left: 8px;
}
.myinfo-morea{
	height:25px ;
	width: 25px;
	margin-right: 5px;
	margin-left: auto;
	text-align: right;
}
.myinfo-secondline{
	height: 50px;
	width: 100%;
	border-bottom: 1px solid #DCDCDC;
	display: flex;
	align-items: center;
}
.myinfo-qianbao{
	height:20px ;
	width: 20px;
	margin-left: 5px;
}
.myinfo-secondline>span{
	font-size: 16px;
	margin-left: 8px;
}
.myinfo-thirdline{
	height: 50px;
	width: 100%;
	display: flex;
	align-items: center;
}
.myinfo-jingxuan{
	height:20px ;
	width: 20px;
	margin-left: 5px;
}
.myinfo-thirdline>span{
	font-size: 16px;
	margin-left: 8px;
}

/* 主题皮肤 心愿存钱 周期记账 */
.myinfo-thirdbox{
	height: 150px;
	width: 100%;
	margin-bottom: 10px;
	background-color: #FFFFFF;
	border-bottom: 1px solid #DCDCDC;
}
.myinfo-fourthline{
	height: 50px;
	width: 100%;
	display: flex;
	align-items: center;
	border-bottom: 1px solid #DCDCDC;
}
.myinfo-pifu{
	height:20px ;
	width: 20px;
	margin-left: 5px;
}
.myinfo-fourthline>span{
	font-size: 16px;
	margin-left: 8px;
}
.myinfo-fifthline{
	height: 50px;
	width: 100%;
	display: flex;
	align-items: center;
	border-bottom: 1px solid #DCDCDC;
}
.myinfo-cunqian{
	height:20px ;
	width: 20px;
	margin-left: 5px;
}
.myinfo-fifthline>span{
	font-size: 16px;
	margin-left: 8px;
}
.myinfo-sixthline{
	height: 50px;
	width: 100%;
	display: flex;
	align-items: center;
}
.myinfo-jzhouq{
	height:20px ;
	width: 20px;
	margin-left: 5px;
}
.myinfo-sixthline>span{
	font-size: 16px;
	margin-left: 8px;
}

/* 帮助与反馈 爱的鼓励 */
.myinfo-fourthbox{
	height: 100px;
	width: 100%;
	background-color: #FFFFFF;
	border-bottom: 1px solid #DCDCDC;
	margin-bottom: 60px;
}
.myinfo-seventhline{
	height: 50px;
	width: 100%;
	display: flex;
	align-items: center;
	border-bottom: 1px solid #DCDCDC;
}
.myinfo-fankui{
	height:20px ;
	width: 20px;
	margin-left: 5px;
}
.myinfo-seventhline>span{
	font-size: 16px;
	margin-left: 8px;
}
.myinfo-eighthline{
	height: 50px;
	width: 100%;
	display: flex;
	align-items: center;
}
.myinfo-guli{
	height:20px ;
	width: 20px;
	margin-left: 5px;
}
.myinfo-eighthline>span{
	font-size: 16px;
	margin-left: 8px;
}


</style>
